<template>

  <a-drawer
    :width="600"
    placement="right"
    :visible="visible"
    @close="closed"
    title="绑定Google令牌"
    class="form-drawer"
  >

  <a-form-model label-position="right" :v-model="formModel" ref="dataForm">
      <!-- <img
        style="width: 300px; margin: 30px"
        src="https://qr.api.cli.im/newqr/create?data=2323&level=H&transparent=false&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&logoshape=no&size=260&kid=cliim&key=f917862eec6a0d0980743e325cde6db9"
      />  -->
      <div ref="qr" style="width: 300px; margin: 30px" />
      <a-alert
        message="1.请在各大应用商店下载[Google Authenticator]并安装"
        type="info"
        :closable="false"
      >
      </a-alert>

      <a-alert
        style="margin-top: 5px"
        message="2.使用[Google Authenticator]扫上面二维码,后点击绑定完成"
        type="info"
        :closable="false"
      >
      </a-alert>
    </a-form-model>
    <div class="form-actions">
      <a-button @click="visible = false">取消</a-button>
      <a-button type="primary" @click="bindFinish">绑定</a-button>
    </div>


    <a-modal
      v-model="promptVisible"
      title="提示"
      @ok="handlePromptOk"
      @cancel="handlePromptCancel"
    >
      <p>请输入Google 令牌</p>
      <a-input v-model="formModel.authCode" />
    </a-modal>


  </a-drawer>
</template>

<script>
import QRCode from "qrcodejs2";
import {googleGen,googleAuth} from '@/api/login'
export default {
  data() {
    return {
      visible: false,
   promptVisible: false,
    formModel: {
        userName:'',
        secretKey: "",
        authCode: "",
      },

    };
  },
  methods: {
    closed(){
        this.$emit("dgClose");
        this.visible=false;
      },
    init(loginName) {
      this.visible = true;
      this.$nextTick(() => {
       this.formModel.userName = loginName;
       this.formModel.secretKey = '';
       this.formModel.authCode = '';
      this.bind();
      });
    },
    firstAuth() { 
      const formData = new FormData();
      formData.append('userName', this.formModel.userName);
      formData.append('secretKey', this.formModel.secretKey);
      formData.append('authCode', this.formModel.authCode);
      googleAuth(formData).then((res) =>{
          this.$notification['success']({
              message: '提示',
              description: `Google 令牌绑定成功!`
            })
            this.closed()
            this.visible = false
        }) .catch(() => {
            this.visible = false
        })
      
    },
    bindFinish() {
      this.promptVisible = true;
    },
    handlePromptOk() {
      if(!this.formModel.authCode){
        this.$notification['error']({
              message: '提示',
              description: `请输入令牌!`
          })
          return ;
      }
      this.promptVisible = false;
      this.firstAuth();
    },
    handlePromptCancel() {
      this.promptVisible = false;
    },
    
    bind() {
      this.cleanQRCode();
      const formData = new FormData();
      formData.append('userName', this.formModel.userName);
      googleGen(formData).then((res) =>{
        this.formModel.secretKey = res.data.secretKey;
        new QRCode(this.$refs.qr, {
          text: res.data.qr, // 需要转换为二维码的内容
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }) .catch(() => {
          this.visible = false
      })
 
    },
    cleanQRCode() {
    // Assuming `this.$refs.qr` is a DOM element where QR codes are rendered
    const qrElement = this.$refs.qr;
    while (qrElement.firstChild) {
      qrElement.removeChild(qrElement.firstChild);
    }
  },
 
  },
};
</script>

<style scoped>
.form-drawer .form-actions {
  margin-top: 20px; /* Adds spacing above the buttons */
  display: flex;
  justify-content: center; /* Centers the buttons horizontally */
  gap: 10px; /* Adds spacing between the buttons */
}

.form-drawer .form-actions a-button {
  min-width: 100px; /* Ensures buttons have a consistent width */
}

</style>